<template>
  <div>
    <vue-json-pretty :data="JSON.parse(data)" :deep="deep" :showDoubleQuotes="false" />
  </div>
</template>

<script setup lang="ts">
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

defineProps({
  data: {
    type: String,
    required: true,
  },
  deep: {
    type: Number,
    default: 2,
  }
})
</script>

<style scoped>
.vjs-tree {
  padding: 14px 24px;
  border-radius: 8px;
  background-color: #f6f8fa !important;
}
</style>
